<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>小可爱的专属</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<style type="text/css">
			#box {
				width: 90%;
				margin: 20px auto;
				font-family: "微软雅黑";

			}
			
			table {
				text-align: center;
				border: none;
			}
			
			table>tbody td>div {
				height: 28px;
				width: 28px;
				font-size: 1.2em;
				line-height: 28px;
				border-radius: 28px;
				margin: auto;
			}
			
			table>tbody td>div.today {
				background-color: #295F8F;
				color: white;
			}
			.text-danger{
				color: ##a94442;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<table class="table">
				<thead>
					<tr>
						<th colspan="7">
							<h3 class="text-center" id="date_title"></h3>
						</th>
					</tr>
					<tr>
						<th class="text-center">日</th>
						<th class="text-center">一</th>
						<th class="text-center">二</th>
						<th class="text-center">三</th>
						<th class="text-center">四</th>
						<th class="text-center">五</th>
						<th class="text-center">六</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
		<div id="aaa">

		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/hammer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hammer_time.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var t = new Date(),
				y_ = t.getFullYear(),
				m_ = t.getMonth() + 1;
			var count = 1;
			showNowDate(y_, m_)

			//			手势事件

			var hammer = new Hammer($('#box')[0]);
			hammer.on('swipeleft swiperight', function(ev) {
				console.log(ev)
				switch(ev.type) {
					case 'swipeleft':
						if(m_ == 12) {
							y_++;
							m_ = 1;
						} else {
							m_++;
						}

						break;
					case 'swiperight':
						if(m_ == 1) {
							y_--;
							m_ = 12;
						} else {
							m_--;
						}

						break;

				}
				showNowDate(y_, m_)
			})
			//			手势事件
			//获取某年某月的第一天是星期几
			function getDays(year, month) {
				var d = new Date(year, month - 1, 1);
				return d.getDay();
			}
			//创建一个输入年月计算出这个月有几天的函数
			function getDatesOfMonth(year, month) {
				var d = new Date(year, month, 0);
				return d.getDate();
			}

			function showDates(year, month) {
				var tr = '<tr>';
				for(var i = 0; i < getDays(year, month); i++) {
					tr += '<td></td>';
				}
				for(var j = 1; j <= getDatesOfMonth(year, month); j++) {
					tr += '<td data_y="' + year + '" data_m="' + month + '" data_d="' + j + '"><div data_y="' + year + '" data_m="' + month + '" data_d="' + j + '">' + j + '</div></td>';
					if((j + getDays(year, month)) % 7 == 0) {
						tr += '</tr><tr>';
					}
				}
				tr += '</tr>'
				return tr;
			}

			function showNowDate(year, month) {
				var t = new Date(),
					y = t.getFullYear(),
					m = t.getMonth() + 1,
					d = t.getDate(),
					d_y, d_m, d_d;
				$('#date_title').html(year + '年' + month + '月');
				$('tbody').html(showDates(year, month));
				$.each($('tbody td>div'), function(index, item) {
					d_y = $(item).attr('data_y');
					d_m = $(item).attr('data_m');
					d_d = $(item).attr('data_d');
					if(d_y == y && d_m == m && d_d == d) {
						$(this).addClass('today')
					}
					if (aaa(sumDays(d_y, d_m, d_d))=='休') {
						$(this).parent().append('<span class="text-danger">'+aaa(sumDays(d_y, d_m, d_d))+'</span>')
					} else{
						$(this).parent().append('<span>'+aaa(sumDays(d_y, d_m, d_d))+'</span>')
					}
					
				});
			}

			function aaa(i) {
				var x = '';
				switch(i % 8) {
					case 3:
					case 4:
					case 5:
						x = '早'
						break;
					case 1:
					case 7:
					case 0:
						x = '晚'
						break;
					case 2:
					case 6:
						x = '休'
						break;
				}

				return x;

			}
			//			var arr = [
			//				[1, 1, 1, 0, 2, 2, 2, 0], //1早，2晚，0休
			//				[1, 1, 0, 2, 2, 2, 0, 1],
			//				[1, 0, 2, 2, 2, 0, 1, 1],
			//				[0, 1, 1, 1, 0, 2, 2, 2],
			//				[2, 2, 2, 0, 1, 1, 1, 0],
			//				[2, 2, 0, 1, 1, 1, 0, 2],
			//				[2, 0, 1, 1, 1, 0, 2, 2],
			//				[0, 2, 2, 2, 0, 1, 1, 1]
			//			]
			function sumDays(year, month, day) {
				var sumday = 0, //计数器
					start_year = 2018,
					start_month = 3,
					start_day = 1;
				for(var i = start_year; i < year; i++) {
					if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
						sumday += 366;
					} else {
						sumday += 365;
					}
				}
				for(var i = start_month; i < month; i++) {
					switch(i) {
						case 1:
						case 3:
						case 5:
						case 7:
						case 8:
						case 10:
						case 12:
							sumday += 31;
							break;
						case 4:
						case 6:
						case 9:
						case 11:
							sumday += 30;
							break;
						case 2:
							if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
								sumday += 29;
							} else {
								sumday += 28;
							}
					}
				}
				for(var i = start_day; i <= day; i++) {
					sumday++;
				}
				return sumday;
			}
		</script>
	</body>

</html>